<template>
  <div class="wrap">
    <!-- 头部 -->
    <home-header />
    <van-pull-refresh v-model="isloading" @refresh="onRefresh">
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in banners" :key="banner.id" >
        <img :src="banner.picUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格导航 -->
    <van-grid column-num='3' clickable>
      <van-grid-item v-for="cate in cates" :key='cate.id'
      :to="{
        path:'./itemlists',
        query:{
          cateId:cate.id
        }
       }"
      :icon="cate.icon"
       :text="cate.name" />
    </van-grid>
    <!-- 推荐商品 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的"
      :offset="50"
      @load="onLoad"
    >
     <items @clickItem='enterDetail' :items="items" @clickAdd="clickAdd"/>
</van-list>
</van-pull-refresh>
    <mtabbar />
  </div>
</template>

<script>
import Mtabbar from '_components/Mtabbar'
import { fetchCates, fetchBanner, fetchItems, addCart, fetchCatesInfo } from '_api'
import HomeHeader from './components/HomeHeader.vue'
import Items from './components/Items.vue'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
   name:'home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      // 商品分页管理
      page: 1,
      pageSize: 5,
      // 上拉是否处于加载状态，触底事件触发时自动变成true
      loading: false,
      // 上拉是否到达最后一页
      finished: false,
      isloading: false
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanner()
    this.fetchCatesInfo()
  },
  methods: {
    fetchCatesInfo () {
      fetchCatesInfo({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$store.commit('cart/set_items', res.data.data.items)
        }
      })
    },
    clickAdd (id) {
      // 加入购物车

      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.$store.commit('cart/set_items', res.data.data.items)
          Toast.success('加入购物车成功，请放心购买')
        }
      })
    },

    enterDetail (id) {
      this.$router.push(`./detail/${id}`)
    },
    onRefresh () {
      this.items = []
      this.page = 1
      this.finished = false
      this.fetchItems()
      this.page++
    },
    onLoad () {
      this.fetchItems()
      this.page++
    },
    fetchBanner () {
      fetchBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 获取导航商品分类
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    // 获取推荐商品
    fetchItems () {
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data.code === 700) {
          this.finished = true
        }
        this.loading = false
        this.isloading = false
        console.log(res)
        if (res.data.code === 0) {
          this.items = [
            ...this.items,
            ...res.data.data.result]
        }
      })
    }
  },
  components: {
    Mtabbar,
    HomeHeader,
    Items
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 50px;
}
.my-swipe {
  img {
    width: 100%;
  }
}
</style>
